<template>
    <div style="width:100%">
        <!-- <div class="model-margin" v-if="power('WJOB_BASEMGR_VEHICLE') || power('WJOB_BASEMGR_MACHINE') || power('WJOB_BASEMGR_TERMINAL') || power('WJOB_BASEMGR_ENTRUSTSPLIT')"> -->
        <div class="model-margin">
            <div class="title-header">
                <div class="line"></div>
                <h3 style="margin-left: 10px;">仓库管理</h3>
            </div>
            <el-row>
                <!-- WJOB_BASEMGR_VEHICLE -->
                <el-col :span="4" v-if="power('WPTMGR_BASEMGR_PORT')" class="common-operating-platform">
                    <div @mouseover="show('workPonit')" @mouseout="hide" class="model-div-width">
                        <div class="icon-button">
                            <img src="@/assets/iconImg/workPonit.png" />
                            <span class="model-title-font">仓库作业点设置</span>
                        </div>
                        <div class="box handle" :style="isActive=='workPonit'?'':'display: none'">
                            <ul>
                                <li style="width: 10px;"></li>
                                <li @click="handleOpen({path:'/Home/SystemBase/warehouseOperationPoint',name:'仓库作业点设置'})" v-if="power('WPTMGR_BASEMGR_PORT:QUERY')">
                                    <i class="iconfont icon-chaxun"></i>
                                    <span>编辑</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4" v-if="power('WPTMGR_BASEMGR_PORT')" class="common-operating-platform">
                    <div @mouseover="show('warehouseSet')" @mouseout="hide" class="model-div-width">
                        <div class="icon-button">
                            <img src="@/assets/iconImg/warehouseSet.png" />
                            <span class="model-title-font">仓库设置</span>
                        </div>
                        <div class="box handle" :style="isActive=='warehouseSet'?'':'display: none'">
                            <ul>
                                <li @click="handleFormOpen('adminWarehouseAddForm')" v-if="power('WPTMGR_BASEMGR_PORT:ADD')">
                                    <i class="iconfont icon-xinzeng"></i>
                                    <span>新增</span>
                                </li>
                                <li style="width: 10px;"></li>
                                <li @click="handleOpen({path:'/Home/SystemBase/warehouse',name:'仓库设置'})" v-if="power('WPTMGR_BASEMGR_PORT:QUERY')">
                                    <i class="iconfont icon-chaxun"></i>
                                    <span>查询</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4" v-if="power('WPTMGR_BASEMGR_PORT')" class="common-operating-platform">
                    <div @mouseover="show('roomSet')" @mouseout="hide" class="model-div-width">
                        <div class="icon-button">
                            <img src="@/assets/iconImg/roomSet.png" />
                            <span class="model-title-font">库房设置</span>
                        </div>
                        <div class="box handle" :style="isActive=='roomSet'?'':'display: none'">
                            <ul>
                                <li @click="handleFormOpen('storageSetAddForm')" v-if="power('WPTMGR_BASEMGR_PORT:ADD')">
                                    <i class="iconfont icon-xinzeng"></i>
                                    <span>新增</span>
                                </li>
                                <li style="width: 10px;"></li>
                                <li @click="handleOpen({path:'/Home/SystemBase/storageSet',name:'库房设置'})" v-if="power('WPTMGR_BASEMGR_PORT:QUERY')">
                                    <i class="iconfont icon-chaxun"></i>
                                    <span>查询</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4" v-if="power('WPTMGR_BASEMGR_PORT')" class="common-operating-platform">
                    <div @mouseover="show('planType')" @mouseout="hide" class="model-div-width">
                        <div class="icon-button">
                            <img src="@/assets/iconImg/planType.png" />
                            <span class="model-title-font">仓库策划类型</span>
                        </div>
                        <div class="box handle" :style="isActive=='planType'?'':'display: none'">
                            <ul>
                                <li @click="handleFormOpen('storehousePlanTypeAddForm')" v-if="power('WPTMGR_BASEMGR_PORT:ADD')">
                                    <i class="iconfont icon-xinzeng"></i>
                                    <span>新增</span>
                                </li>
                                <li style="width: 10px;"></li>
                                <li @click="handleOpen({path:'/Home/SystemBase/storehousePlanType',name:'仓库策划类型'})" v-if="power('WPTMGR_BASEMGR_PORT:QUERY')">
                                    <i class="iconfont icon-chaxun"></i>
                                    <span>查询</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
                
<!-- WJOB_BASEMGR_TERMINAL -->
                <el-col :span="4" v-if="power('WPTMGR_BASEMGR_PORT')" class="common-operating-platform">
                    <div @mouseover="show('planSet')" @mouseout="hide" class="model-div-width">
                        <div class="icon-button">
                            <img src="@/assets/iconImg/planSet.png" />
                            <span class="model-title-font">仓库策划设置</span>
                        </div>
                        <div class="box handle" :style="isActive=='planSet'?'':'display: none'">
                            <ul>
                                <!-- <li @click="handleFormOpen('storehousePlanAddForm')" v-if="power('WPTMGR_BASEMGR_PORT:ADD')">
                                    <i class="iconfont icon-xinzeng"></i>
                                    <span>编辑</span>
                                </li> -->
                                <li style="width: 10px;"></li>
                                <li @click="handleOpen({path:'/Home/SystemBase/storehousePlan',name:'仓库策划设置'})" v-if="power('WPTMGR_BASEMGR_PORT:QUERY')">
                                    <i class="iconfont icon-chaxun"></i>
                                    <span>编辑</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="新增委托拆分计划规则" :visible.sync="dialogForm" width="1000px">
            <entrustSplitRule-form ref="entrustSplitRuleForm"></entrustSplitRule-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">保 存</el-button>
            </div>
        </el-dialog>
        <component :is="component" ref="component" @clear="component=''"></component>
    </div>
</template>

<script>
import adminWarehouseAddForm from "../adminWarehouse/adminWarehouseAddForm"
import storageSetAddForm from "../storageSet/storageSetAddForm"
import storehousePlanTypeAddForm from "../storehousePlanType/storehousePlanTypeAddForm"
import storehousePlanAddForm from "../storehousePlan/storehousePlanAddForm"
import warehouseOperationPointForm from "../warehouseOperationPoint/warehouseOperationPointForm"

export default {
    name: "jobBase",
    components: {
        adminWarehouseAddForm,
        storageSetAddForm,
        storehousePlanTypeAddForm,
        storehousePlanAddForm,
        warehouseOperationPointForm
    },
    data() {
        return {
            dialogForm: false,
            component: "",
            isActive: ""
        };
    },
    mounted() {},
    methods: {
        handleOpen(val) {
            // this.$router.push('/Home/SystemBase/'+val)
            this.$store.commit("ADD_CACHED_VIEWS", val);
            this.$router.push(val.path);
        },
        handleDialogFormOpen() {
            this.dialogForm = true;
            // this.$nextTick(()=>{
            //     this.$refs.entrustSplitRuleForm.getQuery()
            // })
        },
        handleSubmit() {
            this.$refs.entrustSplitRuleForm.handleSubmit(false);
        },
        handleFormOpen(ref) {
            this.component = ref;
            this.$nextTick(() => {
                this.$refs.component.dialogForm = true;
            });
        },
        show(val) {
            this.isActive = val
        },
        hide() {
            this.isActive = ""
        },
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.$refs.entrustSplitRuleForm.form = this.$refs.entrustSplitRuleForm.clearForm();
                this.$refs.entrustSplitRuleForm.$refs.form.resetFields();
            }
        }
    }
};
</script>

<style scoped lang="scss">
.modules {
    min-width: 200px;
    max-width: 270px;
    width: 90%;
    height: 150px;
    border: 1px solid #e4e7ed;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 15px;
}

.title {
    width: 100%;
    height: 45px;
    background: #ecf0fd;
    text-align: center;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    span {
        font-size: 18px;
        color: black;
        // font-weight: 600;
        display: block;
        margin-top: 10px;
    }
}

.handle {
    ul {
        list-style: none; // display: inline-block;
        width: 100%;
        text-align: center;
        li {
            display: inline-block;
            width: 45px;
            margin-top: 6px;
            width: 25%;
            text-align: center;
            i {
                font-size: 32px;
                color: #fff;
            }
            span {
                display: inherit;
            }
        }
    }
}
.title-header {
    width: 90%;
    display: flex;
    height: 30px;
    margin-bottom: 20px;
}
.line {
    border-left: solid 5px #00a1ff;
    height: 18px;
    margin-top: 5px;
}
.model-div-width {
    min-width: 120px;
    max-width: 185px;
}
.model-margin {
    margin-left: 45px;
}
.model-margin-top {
    margin-top: 50px;
}
div.icon-button {
    min-width: 120px;
    max-width: 185px;
    height: 100px;
    border: 1px;
    text-align: center;
    line-height: 30px;
    padding-top: 20px;
    border-radius: 5px;
    border: 1px solid #e4e7ed;
    span {
        display: block;
    }
}
el-col {
    position: relative;
}
.model-title-font{

}
.box {
    position: absolute;
    top: 0;
    width: 185px;
    height: 100px;
    border: 1px;
    background: #000;
    opacity: 0.9;
    text-align: center;
    line-height: 30px;
    padding-top: 20px;
    border-radius: 5px;
    color: #fff;
    ul {
        margin-top: 10px;
    }
}
</style>
